TypeScript学习——静态类型(1)

一：定义

1.TypeScript无法直接在浏览器上运行(node也无法去运行)，会被编译成JavaScript语法再去运行
2.是JavaScript的超集，是静态类型，一旦定义成某类型，将无法改变

//静态类型
let c: number=123;
c='123';//报错 
c=123; 

二：优势

1.开发过程重，编写代码的时候快速发现潜在问题 2.更好的代码提示 3.通过静态类型的定义可以更好阅读代码

function tsdemo(data:{x:number,y:number}) { //明确知道data类型  更好阅读代码
    return Math.sqrt(data.x**2+data.y**2)
}
tsdemo()//会直接报错 没有输入data数据

三：基础环境搭建

1.需要node npm

npm install -g typescript

2.编译成JavaScript 然后再执行js文件

tsc demo.ts //编译成js文件
node demo.js//运行 

3.利用工具自动编译运行

cnpm install -g ts-node

ts-node demo.ts

四：静态类型

静态类型的深层次理解： 静态类型，代表其类型，方法和属性已经确定了，代码提示也会很友好

基础类型和对象类型

基础类型 null underfined symbol ,boolean,void number string

//基础类型 null underfined symbol ,boolean,void
const count:number=123;
const teacherName:string='Dell';

对象类型 , {} , class，function , [ ]

class Person{}
const teacher:{
    name:string;
    age:number;
}={
    name:'Dell',
    age:18
}
const numbers:number[]=[1,2,3];//number类型是一个数组
const dell:Person=new Person(); //dell 必须是对象类

const getotal:()=>number=()=>{ ///返回值必须是数值
    return 123;
}

** 类型注解 type annotation 我们告诉TS变量是什么类型** ** 类型推断 type inference ,TS 会自带的去尝试分析变量的类型** // 如果TS 能够自带分析变量类型，我们就什么也不需要做了 // 如果TS无法分析变量的类型的话，我们就需要使用类型注解

let count: number;
count = 123;
let conutInference = 123; //类型推断
const firstNumber = 1;
const secondNumber = 2;
const total = firstNumber + secondNumber; //类型推断自动推断是number

function getTotal(firstNumber: number, secondNumber: number) {
  //无法自己推断,需要类型注解
  return firstNumber + secondNumber;
}
const totals = getTotal(1, 2); //类型推断自动推断是number

const obj = { name: 'dell', age: 18 };

如果 定义和赋值不在一行 那么TS就无法自动类型推断，需要自己写类型注解

let count:number;
count=123;

parse 无法推断出

const rawDate='{"name":"dell"}';
const newData :Person= JSON.parse(rawDate);

函数相关类型

function add(first:number,second:number):number{ //加上对返回值定义
    return first+second+''; //报错 必须返回时number
}
const total=add(1,2)

定义返回值为void 表示该函数不应该有返回值

function sayHello():void{
    console.log('hello');
}

never的情况

function errorEmitter():never{
 throw new Error();
 console.log(123);
}
function errorEmitter():never{
while(true){

}
}

函数的两种写法

1.
const func = (str: string): number => { //number可以省略 可以根据parseInt推断出
  return parseInt(str, 10);
};
2.
const func1: (str: string) => number = (str) => {//number必须写
    return parseInt(str, 10);
};

解构类型的注解写法

function add({ first, second }: { first: number; second: number }): number {
  return first + second;
}
function getNumber({first}:{first:number}){
    return first;
}
const total = add({ first: 1, second: 2 });

如果存在多个类型 可以直接|或定义

let temop:number|string=123;
temop = '456';

本文由博客群发一文多发等运营工具平台 OpenWrite 发布