Typescript入门

安装：npm install -g typescript
检测安装：tes -V
vscode编辑器新建一个ts文件，取名1.ts

//字符串与any类型
let username:string     //定义为字符串方式1
let uname= "Runoob";      //定义为字符串方式2
let names:string = "Runoob";      //定义为字符串方式3
let score1:number = 50;
let score2:number = 42.50
let sum = score1 + score2
let total=score1+uname  
console.log("名字: "+uname) // Runoob
console.log("总成绩: "+sum) // 92.5
console.log("total: "+total)    // 50Runoob

let a:any=5
a="123"
a=false

运行编译命令：tsc 1.ts 此时会自动生成一个同名js文件，1.js
运行命令: node 1.js 打印以上结果

三种类型断言：as 、感叹号

类型断言（Type Assertion）用来手动指定一个值的类型。

as

//方式一
let len = (<string>str).length;```
//有兼容性问题, 在使用到了JSX的时候兼容性不是很好

//方式二 as （建议）
let len = (str as string).length;

感叹号
感叹号是非null和非undefined的类型断言

function processEntity(e?: Entity) {
  validateEntity(e);
  let s = e!.name;  
}

如上，若直接使用 let s = e.name; 编译器会抛出e可能不存在的错误，但是使用非空断言，则表示e肯定是存在的，从而不会产生编译问题。

---

数组、元组

//数组中元素的数据类型都一般是相同的
let arr:string[];    //定义1
let arr1 = ["Google","Runoob","Taobao"]   //定义2
//如果存储的元素数据类型不同，则需要使用元组
let yarr1:(number|string)[]  //定义元组1
//yarr1 = [false,"Runoob"]; // false不是已声明的类型之一
let yarr2 = [10,"Runoob"]; // 定义元组2

枚举

enum Color {
    red,
    grey,
    green=5,
    black,
    default="默认"
}
console.log(Color.grey) //从0开始所以是1
console.log(Color.black)    //green被设为5，自然这里是6
console.log(Color.default)  //默认

void 与 undefined

undefined 类似于已声明但未初始化值
void 等于不存在，也从未声明过

接口和类

interface People { 
    name:string, 
    sex:number, 
    say: ()=>string 
} 
 
var a:People = { 
    name:"小a", 
    sex:1, 
    say: ()=>{        
        return "我是小a"
    }
}
console.log(a.name)
console.log(a.say())

class c_b implements People{
    name
    // 构造函数 
    // Access Modifier 访问修饰符，可以省略定义类变量和赋值
    constructor(name,public sex) { 
        this.name=name 
    } 
    say(){
        return `我叫${this.name},是${this.sex?'男生':'女生'}`
    }
}

var b=new c_b("小b",0)
console.log(b.name) //小b
console.log(b.say())    //我叫小b,是女生

---

interface接口

// shape接口
interface shape {
  color: string; //颜色
}
interface Triangle extends shape {
  sideNum: number; //边数
}
//const a = <Triangle>{}; //报错的,接口不能空实例

//报错的，实例接口不应该这样写
// const b = <Triangle>{
//   color: "asd",
//   sideNum: 2,
// };

//实例接口正确
const c: Triangle = {
  color: "asd",
  sideNum: 2,
};
console.log("c", c);

模块和泛型

import {cc} from './people'  //模块

var c= new cc("小c",1)
console.log(c.say())

let str_arr:string[]
str_arr=["a","b","c"]   //str_arr类型是：string[]
//str_arr=[5,"b","c"]   //明显是错误的

let a_arr:any[]
a_arr=["a","b","c"]   //a_arr类型是：any[]
a_arr=[5,"b","c"] 

//let t_arr:T //不存在直接将变量定义为泛型，而是应结合函数或类
let t_arr=<T>(arr:T[])=>{
    //  return false;  //下面调用t1 t2都将变为boolean类型
    return arr[arr.length-1];     
}

let t1=t_arr(["a1","b1","c1"])   //t_arr为string
let t2=t_arr([5,"b2","c2"])  //t_arr为string|number类型
console.log("t1:",t1)  //c1
console.log("t2:",t2)  //c2


function getData<T>(value: T): T {
    return value;
}
console.log(getData("a"))   //a
console.log(getData(5)) //5

//people.ts   模块
export class cc{
    name:string
    // 构造函数 
    // 构造函数的参数前加public或private等，可以省略定义类变量和赋值
    constructor(name,public sex:number) { 
        this.name=name 
    } 
    say(){
        return `我叫${this.name},是${this.sex?'男生':'女生'}`
    }
}

ts中 type 和 interface 有什么异同？

interface侧重于描述数据结构，type侧重于描述类型

interface A{
  name:string;
}
type B = 'bb'|'cc'

都可以描述一个对象或者函数

interface user {
  name: string;
  age: number
}
interface setUser {
  (name: string, age: number): void
}
type hoster = {
  name: string;
  age: number;
}
type setHoster = (name: string, age: number) => void