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();
