ts基础语法

数据类型

number
string
boolean
enum
any
unknow
null
undefined
Array
object
tuple
void
never

案例一

let num1: number = 123;
let str: string = "nj";
let bool: boolean = false;
let arr: string[] = ["kkk"]; // 数组的存放类型是单一的

let info = {
  username: "wxj",
  age: 18,
};

let isnull = null;
let isundefined = undefined;

// 通常不加返回类型
const add = (num1: number, num2: number): string => {
  return num1 + num2 + "";
};

const add1 = (option: { username: string; age: number,sex?:string }) => {
  console.log(option);
};

add1({
  username: "123",
  age: 18,
});

export {};

案例二

enum Color { // 如果不给 red... 赋值 就是0 1 2...
  red = "#ff0000",
  blue = "#0000ff",
  yellow = "#155255",
}

let color: Color = Color.blue;		// "#ff0000"


let tuple1: [string, number] = ["123", 15];

let any_data: any = "123";

let un_data: unknown = "456"; // unknown 不能再随便赋值给其他的值

// 使用联合类型，一定要注意不同类型所使用的方法
let str_num: number | string  = "false";

str_num = 456;

function show(): void {
  // void 表示没有返回值
  console.log("lll");
}

interface i_needType {
  length: number;
}

//限制输入的必须有length这个属性
const getLength = (str: i_needType): void => {
  console.log("length-----", str.length);
};

getLength([123]);

export {};

类型别名

type type1=string | number
type optionType={
    username:string,
    age:number,
    sex?:string,
}

function getUserData(option:optionType){
    return option
}

console.log(getUserData({
    username:"string",
    age:18,
}));

export {}

类型断言

// TypeScript只允许类型断言转换为 更具体 或者 不太具体 的类型版本，此规则可防止不可能的强制转换：
// let el_img = document.querySelector(".img1") as HTMLImageElement;

// el_img.src = "jjj";

function printLength(message?:string){
    // 非空断言使用的是 ! ，表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测；
    console.log(message!.length);       // 这儿报错了
}

function printLength1(message?:string){
    // 它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行；
    console.log(message?.length); 
}

printLength1()

let obj:{
    username:string,age?:number
}={
    username:"456",
}

console.log(obj?.age);

export {};

字面量类型

type option_type = {
  url: string;
  methods: "POST" | "GET";      // 只能是这儿枚举出来的
};

function request(option: option_type) {
  console.log(option);
}

request({
    url:"123", 
    methods: "GET"
})

export {};

元组

function setState<T>(state:T){
    let currentState =state
    const changeState=(newState:T)=>{
        currentState=newState
    }

    const tup:[T,(newState:T)=>void]=[currentState, changeState]

    return tup

}

const [val,setVal]=setState(123)

const [str,setStr]=setState("123")


export {}

函数类型

// type 方式
type obj_type = (num: number) => number; // void 表示随意返回数据,包括不返回 never 表示不返回

// interface 方式
interface i_show_number {
  (num: number): number;
}

// 这儿使用上面的两种均可
const show_number: i_show_number = (num: number = 10): number => {
  console.log(num);
  return num;
};

function show(num: number): string {
  return num + "";
}

// 直接 定义
// ...arr 表示剩余参数
function sum1(str1: string, ...arr: number[]) {
  console.log(arr);
}

interface i_sum {
  (str1: string, ...arr: number[]): void;
}
// 使用接口实现
const sum: i_sum = (str1: string, ...arr: number[]) => {
  console.log(arr);
};

sum("小明", 456, 14);

export {};

函数的重载

// 先不实现具体的函数体
function add(num1:number,num2:number):number;
function add(num1:string,num2:string):string;

function add(num1:any,num2:any):any{
    console.log(num1+num2);
    
    return num1+num2
}

add(1,2)
add("hh","kk")

类

class Person {
  // 不能省略
  static time:string ="周末"        // 静态属性，可以直接使用类来使用 Person.time
  username: string;
  public password: number; // public 是默认的
  private _height: number = 185; // 只在当前类中能访问
  protected weight: number = 65; // 在类的子类中，能访问 ,实例中也不能访问
  readonly like?: string = "456"; // 表示初始化后就不可再修改，但如果是引用类型，是可以修改其中的属性的

  constructor(username: string, password: number, like?: string) {
    this.username = username;
    this.password = password;
  }
  // 这儿不被推荐
//   getHeight() {
//     console.log(this._height);
//   }

//   setHeight(newHeight: number) {
//     this._height = newHeight;
//   }

  // 属性访问器
  get height(){
      return this._height
  }

  set height(newHeight: number){
    this._height = newHeight;
  }

  say() {
    console.log("username---", this.username);
  }
}

class Student extends Person {
  sex?: string;
  constructor(username: string, password: number, sex?: string) {
    super(username, password);
    this.sex = sex;
  }

  // 重写
  say() {
    console.log(this.weight);
    console.log(this.sex || "不存在");
  }
}

let s = new Student("wxj", 18);

// console.log(s);
s.say();
s.height=255        // 访问器
console.log(s.height);


export {};

泛型

案例一

function add<T>(num1: T, ...args: T[]): T {
  return num1;
}

add<number>(123, 1, 2);

interface i_obj<T=number, E=string> { // 可以设置默认的
  username: T;
  age: E;
}

let obj:i_obj<string, number>={   // 如果有默认的可以不输入类型
  username: "string",
  age:18
}


class Person<X,Y>{
  username: X;
  age: Y
  constructor(username:X,age:Y){
    this.username = username;
    this.age = age;
  }
}

let p=new Person<string, number>("jjj",18)

export {};

案例二

interface i_length {
  // 这儿接口表示 必须存在length属性，且返回值是 number
  length: number;
}

function getLength<T extends i_length>(arg: T) {
  console.log(arg.length);
}

getLength("123")
getLength([1,2,3])

接口

案例一

// 使用基本和 type 一致
// interface 可以重复的对某个接口来定义属性和方法；
// p而type定义的是别名，别名是不能重复的；
// 推荐 interface

interface i_info{
    readonly username:string;
    age:number,
    frind?:{
        age?:number,
        username:string
    }

}


let obj:i_info={
    username:"wxj", 
    age:18,
    frind:{
        username:"wxl"
    }
}

// obj.username="456"       // 不能修改

interface i_list {
    [index:number]:string,
}

let list={
    1:"html",
    3:"css"
}

// 函数
interface i_fn{
    (num1:number, num2:number):number
}

const add:i_fn =(num1:number, num2:number)=>{
    return num1+num2
}

// 接口的继承
interface i_all extends i_fn,i_list{
    son:string
}



export {}

案例二

interface i_list{
    username:string;
    say:(username:string)=>void;
} 

let newlist={
    username:"string",
    age:18,     // 这是个原来没有定义的类型
    say:(username:string)=>{
        console.log(username);   
    }
};

let list:i_list=newlist

console.log(list);


export {}