初识typescript

👇👇
仓库地址

小试牛刀

npm install -g typescript

初始化配置项

tsc – init

在编辑器，将下面的代码输入到greeter.ts文件里：

类型注解

function greeter(person:string){
   
  return `hello, ${
     person}`
}
let user='cc';
console.log(greeter(user));

接口

interface Persion {
   
  firstName: string;
  lastName: string;
}

/**
 * @description 接口使用
 * @param person
 */
function greeterTwo(person: Persion) {
   
  return `Hello， ${
     person.firstName} ${
     person.lastName}`;
}
let userTwo = {
    firstName: 'wu', lastName: 'chen' };

运行代码

> tsc greeter.ts

如果通过项目依赖安装,则可以通过以下命令
> npx tsc greeter.ts

基础篇

👇基础类型篇

元祖 Tuple

声明 元祖类型
let x:[string,number]

初始化
x=['wu',22]; 0k
x-[22,'wu'] Error 顺序类型不一致 

枚举 (enum)

enum Color{
   
  Red,
  Green,
  Blue
}
let c:Color=Color.Green  1 默认下标从0开始

enum ColorTwo={
   Red=1,Green,Blue};
let colorName: string = Color[2];  Green 它在代码里的值是2

Any

当一个值可能来自于动态的内容,或者我们不确定变量的类型时，可以使用Any

let notSure:any=4;
notSure = false; Ok

Void

它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void

function say():void {
   
  console.log('this is no return anything');
}

Never

never类型表示的那些永远不存在的值的类型。例如:抛出异常、或根本不可能有返回值的函数

无法到达终点
function error(message:string):never{
   
  throw new Error(message);
}
function infiniteLoop():never{
   
  while(true){
   }
}

类型断言

类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。

表示方式一
let someValue:any='this is a string';
let strLength:number=(<string>someValue).length;

// 表示方法二
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

注:当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

接口

接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

interface LabelledValue {
   
  label: string;
  number?: number; //可选属性
  readonly size: number; //只读属性