TS基本语法

一、安装

npm install -g typescript
或者
cnpm install -g typescript
或者
yarnlobal add typescript

二、运行

tsc xxxx.ts

注意：如果电脑上面没有安装过cnpm，请先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意：如果电脑上面没有安装过yarn，请先安装yarn

npm install -g yarn
或者
cnpm install -g yarn

三、Typescript开发工具Vscode自动编译.ts文件
1.创建tsconfig.json文件 tsc --init 生成配置文件，释放outDir改成"outDir":“./js”
2.老版本vscode点击：任务->运行任务->tsc:监视-tsconfig.json然后就可以自动生成代码了

四、基础
布尔类型（boolean）

//true false
var flag:boolean=true
flag = false

数字类型（number）

var a:number=123

字符串类型（string）

var str:string="this is ts"

数组类型（array）

//第一种方法
var arr:number[]=[1,2,3]
var arr:string[]=["1","2","3"]
//第二种方法
var arr:Array<number>=[11,22,33]
var arr:Array<string>=["11","22","33"]

任意类型（any）

var num:any = 123;
num="str";
num=true;
console.log(num);

联合类型 xxx | xxx

let arr: (number | string)[ ] = [1,2,3,'abc']

null和undefined

//属于其他（never）数据类型的子类型
注意：定义没赋值此写法报错
var num:number;
console.log(num) //输出undefined   ---报错

var num:undefined;
console.log(num); //输出undefined   ---正确

var num:number | undefined;
num=123;
console.log(num);   //输出为123；  ---正确

var num = null;
num = 123;   ---错误

var num = null;
num = null;  ---正确

var num:number | null | undefined;
num = 1234;
console.log(num);  //输出为1234;  ---正确

void类型（没有return的时候）

//typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值
function run():void{      //表示没有返回任何类型
    console.log('run')
}

---错误写法
function run():undefined{
    console.log('run')
}
run()
---正确写法
function run():number{     //表示返回的是number类型
    return 123;
}
run();//typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值
function run():void{      //表示没有返回任何类型
    console.log('run')
}

---错误写法
function run():undefined{
    console.log('run')
}
run()
---正确写法
function run():number{     //表示返回的是number类型
    return 123;
}
run();

函数

// function 函数名（参数1：参数1类型，参数2：参数2类型）:返回值类型 { }
function getInfo(name:string,age:number):string{
  return `${name} --- ${age}`;
}

//箭头函数
const sub = (name:string,age:number):number => { return a }

• 方法可选参数

// es5里面方法的实参和形参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数
注意：可选参数必须配置到参数的最后面
function getInfo(name: string, age?: number): string {
  if (age) {
    return `${name} --- ${age}`;
  } else {
    return `${name} --- '年龄保密'`;
  }
}
alert(getInfo("zhangsan1",40))

• 默认参数

function getInfo(name: string, age: number=20): string {
  if (age) {
    return `${name} --- ${age}`;
  } else {
    return `${name} --- '年龄保密'`;
  }
}
alert(getInfo("zhangsan1"))  //输出为  zhangsan1---20

• 剩余参数

// 三点运算符，接受新参传过来的值
function sum(...result:number[]):number{
  var sum = 0;
  for(var i=0; i<result.length; i++){
    sum+=result[i]
  }
  return sum;
}
alert(sum(1,2,3,4))  //输出为10

function sum(a:number,b:number,...result:number[]):number{
  var sum = a+b;
  for(var i=0; i<result.length; i++){
    sum+=result[i]
  }
  return sum;
}
alert(sum(1,2,3,4))

• ts函数重载

// java中方法的重载，重载值的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况
// typescript中方法的重载，通过为同一个函数提供多个函数类型定义来实现多种功能的目的
// ts中的重载
function getInfo(name: string): string;
function getInfo(age: number): number;
function getInfo(str: any): any {
  if (typeof str === 'string') {
    return '我叫' + str;
  } else {
    return '我的年龄是' + str;
  }
}
alert(getInfo('张三'))  // 输出为 我叫张三

function getInfo(name: string): string;
function getInfo(name: string, age: number): string;
function getInfo(name: any, age?:any): any {
  if (age) {
    return '我叫' + name + '我的年龄是' + age;
  } else {
    return '我叫' + name;
  }
}
alert(getInfo('张三'))  // 输出为 我叫张三

对象类型 - 接口（interface）作用：只能给对象约束属性和方法

interface IPerson{
    name:string
    age:number
        sayHi:()=> void
}
const p1:IPerson = {
    name:'洋洋'
    age:18
    sayHi(){
        console.log('我是洋洋')
    }
}

• 接口扩展，接口可以继承接口(extend)

// 案例一
interface Animal{
  name:string;
}
interface Person extends Animal{
    age：number
  sayHi:()=> void
}
const p1:Person= {
    name:'洋洋'
    age:18
    sayHi(){
        console.log('我是洋洋')
    }
}

类型断言 as (强行指定获取到的结果类型)

const a = document.getElementById('link') as HTMLAnchorElement

五、进阶
类型别名（type）

//案例一
type ArrType = (number | string)
let arr1:ArrType = [1,2,3,'abc']
let arr2:ArrType = [1,2,3,'abc']
let arr3:ArrType = [1,'aaa',3,'abc']

//案例二
type ItemType= number | string
let arr5:ItemType = [1,2,3,'abc']
let str:ItemType = '123'
let num:ItemType = 123

//案例三（函数使用）通常给箭头函数、函数表达式使用，不会给函数声明使用
type FnType = (a:number, b:number) => number
const sub:FnType = (a,b) => {
    return a-b
}

• type的继承(& 表示两个都要满足；| 满足其中一个即可)

type Person = {
    username:string
    age:number
    sayHi:()=> void
}
type Student = {
    score:number
    sleep:() => void
} & Person 

const p1:Student= {
    username:'洋洋',
    age:18,
    sayHi(){
        console.log('我是洋洋')
    },
    score:36,
    sleep(){
        console.log('我在睡觉')
    }
}

元组类型（tuple）

//元组类型指的是可以指定里面的数据类型
var arr:[string,number,boolean]=["ts",3.18,true]

字面量类型（值写死）

type Gender = '男' | '女' | '妖'
function changeGender(gender:Gender){
    console.log(gender)
}
changeGender('妖')

枚举类型（enum）（默认从0开始）

//案例一
enum Direction{
    男，
    女，
    妖
}
function changeDirection(direction:Direction){
    console.log(direction)
}
changeDirection(Direction.男)
changeDirection(Direction.女)
changeDirection(Direction.妖)

//案例二
enum Direction{
    Up = '上'，
    Down = '下'，
    Left = '左'，
    Right = '右'
}
function changeDirection(direction:Direction){
    console.log(direction)
}
changeDirection(Direction.Up)
changeDirection(Direction.Down)
changeDirection(Direction.Left)
changeDirection(Direction.Right)

泛型、T (在保证类型安全前提下，让函数等与多种类型一起工作，实现复用), 泛型的名字T可以随便定义

// 案例一（同时返回string类型和number类型、boolean类型）
function getData<T>(value:T):T{
  return value;
}
getData<number>(123);
getData<string>('1234');
getData<boolean>(true);

• 泛型约束

//案例一(不完美)
function getId<T>(val:T[]){
        console.log(val.length)
    return val
}
getId([1,2,3])

//案例二 （添加约束，利用接口）
interface ILength{
    length:number
    asyHi:()=>void
}
function getId<T extends ILength>(val:T){
        console.log(val.length)
    return val
}
getId<string>('abcd')

//案例三（多个类型变量）
function getProp<O, K extends keyof O>(obj:O, key:K){
    return obj[key]
}
const p1 = {
    name:'洋洋',
    //age: '20',
    gender:'男'
}
const result1 = getProp(p1, 'name') //对
const result2 = getProp(p1, 'age') //错
const result3 = getProp(p1, 'gender') //错

//案例四（keyof常规用法）
type Friend = {
    name:string
    age:number
    hobby:string
}
let num: keyof Friend = 'age'

泛型接口

interface Student<T>{
    id:number
    name:T
    bobby:string[]
}
let s1:Student<string> = {
    id:123,
    name:'洋洋'
    hobby:['抽烟','喝酒','打豆豆']
}
let s2:Student<number> = {
    id:123,
    name:0
    hobby:['抽烟','喝酒','打豆豆']
}

never 其他类型

//（包括null和undefined）的子类型，代表从不会出现的值
//  这意味着声明never的变量只能被never类型所赋值
var a:undefined;
a=undefined;

var b = null;
b = null;

var a:never;
a=(() => {
  throw new Error('错误');
})()