TypeScript筆記

ts必須編譯成js語言才能被瀏覽器解析

文檔?TypeScript文檔

1、第一個TS程序

需求:編寫一個示例,通過一個函數傳入顯示人的姓名,并將顯示信息輸出到頁面中。

//定義一個函數

function tip( name: string){”

? ? ? return name+" hello"

}

//調用函數

let? _name=" Tom";

//將函數返回的內容作為頁面顯示字符

document. body. innerText=tip(_name)


2、類型和定義

? ? ? //定義一個字符型變量

? ? ? let str=" Tom";

? ? ? let str2: string;

? ? ? str2= str+`,你好,${ str }`;


? ? ? //數組定義

? ? ? let arr: number[ ]=[2,4,6];

? ? ? let? arr: string[ ]=[" abcd"]


? ? ? //元組定義 既知道數量,又知道類型的數組

? ? let? arr:[ string, number]=["aaa",666];


? ? //任意類型值

? ? let arr:any [ ]=[ " asdfg",123,false];


? ? //空值類型

? ? function systemout(): void {

? ? ? ? console.log()

}


變量申明

//定義一個變量

let str: string=" abd"

//定義一個函數

function person( name: string, age: number, isStudent: boolean){

? ? ? console. log( name, age, is Student)

}

//調用函數

person(" Tom",18, true)


三、接口

1、定義與使用

定義
使用

2、繼承

定義
調用

四、類

定義

1、定義和使用

定義
定義

2、繼承和接口

//定義一個函數

function aa( name: string,age: number): void{

? ? ? console. log( name,age)

}

aa(" Tom",40);


1、定義一個匿名函數

let? abc= function(code: string){

console.log(code)

}

abc("sssss")


2、定義匿名函數

( function( code2: string){

? ? console. log( code2)

})("123456");


2、泛型

定義函數泛型/參數泛型

function output<T>(n: T[]):T[]{

? ? console. log( n.length)

? ? ? return n

}

//調用

output([6])

output(["aa"])


//類泛型

class Stu<T>{

? ? ? list:T[]=[];

? ? add(v:T){

? ? ? ? this.list.push(v)

? ? }

}

//實例化類

let s1= new Stu< string>();

s1.add("aa");

s1.add("bb");



3、枚舉

//定義一個枚舉類型的集合

enum Color{

? ? red,? // red=1

? ? blue,

? blank

}

//訪問集合中的類型

console. log( Color. blue)

console. log( Color[1], Color[ Color. blue ])


//取日期中的星期

let w=(new Date()). getDay();? //0,1,2

//定義一個代表星期的枚舉類集合

enum Week{

? 星期天,

? 星期六,

? 星期五,

? 星期四

}

//將獲取的數字轉成文字

switch(w){

? case? Week.星期天:

? ? ? ? ? console. log( Week[ Week.星期天])

? ? ? ? ? break;

? ? default:

? ? ? ? ? break;

}


五、模塊

function a(){

? console. log("a")

}

模塊創建與使用

export? function b(){

? console. log("b")

}

import { a } from? "xx";


//定義一個方法輸出學生姓名

export function student( name: string){

? ? console. log("學生姓名是"+ name)

}


//定義一個方法輸出老師姓名

export function teacher( name: string){

? ? console. log("老師姓名是"+ name)

}


//訪問學生和老師模塊

import { student } from? " student";

import { teacher } from? " teacher.";

function log( arrStu: string[ ], teaName: string){

? arrStu. forEach(item=>{

? ? ? student( item);

? })

? ? ? teacher( teaName)

}

// index.ts

import { log }? from " log"

let arrStu=[" Tom"," Larry"]

let tName =" Jason"

log(arrStu, tName)


六、命名空間

//構建一個命名空間

namespace? name{

? ? ? export? class? Person{

? ? ? ? ? ? _name: string=" Tom"

? ? ? ? ? ? constructor(n: string){

? ? ? ? ? ? ? ? this._name=n;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? say(){

? ? ? ? ? ? ? ? ? console. log( this._name)

? ? ? ? ? ? ? }

? }

}

//使用命名空間

///< reference path="aa.ts">

//使用空間中導出的類

let p1= new? name. Person(" Tom")

//實例化對象中方法

p1. say();

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容