ts语法入门-1

记录今天学习–Ts
1、安装ts— npm i -g typescript
2、查看tsc版本— tsc -v
3、创建ts文件 index.ts 写入以下代码;终端运行—tsc index.ts 可得到index.js
4、如果出现tsc命令报错,则需要在powershell中查看执行策略— get-ExecutionPolicy
如果是restricted:表示是受限制的
运行set-ExecutionPolicy RemoteSigned
再次运行tsc命令— tsc index.ts应该就可以了

// const dataset = [
//   '类型声明',
//   '自动类型判断',
//   '字面量声明',
//   'any类型',
//   'unknown类型',
//   '类型断言',
//   '函数',
//   '对象类型声明',
//   '数组类型声明',
//   '扩展类型元组(tuple)',
//   '枚举(Enum)',
//   '联合类型声明',
//   '类型别名',
// ]

{
  // 类型声明
  let a: number;
  a = 10;
  // a='hello'

  let b: boolean = true;

  function func(name: string) {
    console.log("类型声明: " + name);
  }
  func("hello");
  // func(111)
}

{
  //  自动类型判断
  let a: number = 100;
  let b = 111;
  // b = 'sss'
  console.log("自动类型判断: " + typeof b);
}

{
  // 字面量声明 --类似于常量
  let a: 10;
  // a = 11;
  console.log("字面量声明: " + a);
}

{
  // any类型 --不推荐使用
  let a: any;
  a = 1;
  a = "sss";
  a = [];
  a = true;

  let b;
  b = 1;
  b = "关闭了自身的ts校验,在把当前值赋值给别人的时候也影响了别人的类型校验";

  let c: number;
  c = 100;
  c = b;

  console.log("any类型: " + c);
}

{
  // unknown类型
  let a: unknown;
  a = 1;
  a = true;
  a = "unknown可以理解为安全的any类型";

  let b: string;
  // b = a
  if (typeof a === "string") {
    b = a;
  }
  console.log("unknown类型: " + b);
}

{
  // 类型断言
  let a: unknown;
  a = "用as代替typeof判断,实现unknown类型赋值";
  let b: string;

  b = a as string;
  console.log("类型断言: " + b);
}

{
  // 函数声明
  // 函数形参类型声明
  function func1(name: string, params: object) {
    console.log("函数声明: " + name);
  }

  // func1('tom', 1)
  // func1('tom', {},12)
  func1("函数参数个数、类型必须和形参保持一致", {});

  // 函数中返回值的声明
  // function func2():string {
  //   console.log(123)
  // }
  function func3(): string {
    return "函数返回值类型声明之后必须返回对应的类型的值,不过void表示不返回或者返回null、undefined";
  }
  let a = func3();
  console.log("函数返回值声明: " + a);

  // void表示不返回或者返回null、undefined
  function func4(): void {
    // return 1   // 报错
    // return 'ss'  // 报错
    // return NaN   // 报错
    // return null
    // return undefined
    // return
  }

  function func5(): never {
    throw new Error("设置返回值类型为never,直接抛出");
  }

  func5();
}

{
  // 对象类型声明
  // let propName: string;
  let a: {
    name: string;
    age?: number;
    obj?: {};
    [propName: string]: unknown;
  };
  a = {
    name: "用{}来校验对象类型;  ?可表示可选择, [propName: string]表示任意的字符串可作为对象a的键名",
    sayHello() {
      console.log("对象类型声明: " + this.name);
    },
  };
  if (typeof a.sayHello === "function") {
  //  此处如果报错,则修改[propName: string]: unknown 为[propName: string]:any  暂时还不明白原因
    a.sayHello(); 
  }
}

{
  // 数组类型声明
  let a: string[] = [];
  a[0] =
    "数组类型声明: string[]或者Array<string>意思是数组中的元素必须都是string类型";
  // a[1] = 1
  // a[1] = {}

  let b: Array<number> = [];
  b[0] = 123;
  // b[1] = function(){}
  console.log(a[0]);
}

{
  // 扩展类型元组(tuple)
  let a: [string, number, boolean];
  a = ["元素个数需要和声明时候的个数一致,类型顺序需要一致", 123, true];
  // a = [1,2,3]
  console.log("扩展类型元组(tuple): " + a[0]);
}

{
  // 枚举(Enum) -- 一种特定类型的计数
  enum a {
    x,
    y
  }
  console.log(a); // {0: "x", 1: "y", x: 0, y: 1}

  enum b {
    x = 3,
    y,
    z
  }
  console.log(b); // {3: "x", 4: "y", 5: "z", x: 3, y: 4, z: 5}  可以看到自增规则

  // 字符串类型的枚举
  enum c {
    x = "x",
    // y, 报错--枚举成员必须具有初始化表达式
    // z
    y = "y",
    z = "z"
  }
  console.log(c); // {x: "x", y: "y", z: "z"}
}

{
  // 联合类型声明 --- |
  let a: number | string | boolean;
  a = 1;
  a = false;
  a = "联合类型声明: 赋值范围需要在声明的类型中";

  console.log(a);

  // 字面量相同
  let b: 1 | 2 | 3;
  b = 1;
  b = 2;
  // b = 4;
}

{
  // 类型别名
  type myVariable = string | number | 1 | 2 | {} | 3 | 4 | boolean;
  type myVariable2 = string | number | 1 | 2 | 3 | 4 | boolean;
  let a: myVariable = function () {};
  a = true;

  // let b: myVariable2 = function(){} //报错
  let c: myVariable;
  c = '类型别名:类似于js全局变量,赋值的时候需要看清楚类型限制'

  console.log(c);
}

在HTML使用TypeScript语法,需要将TypeScript代码编译为JavaScript代码后再在HTML引用。以下是一个示例: 首先,在TypeScript文件编写代码,例如在一个名为`script.ts`的文件: ```typescript let body: HTMLElement = document.body; let allDiv: NodeList = document.querySelectorAll('div'); document.addEventListener('click', function(e: MouseEvent) { // Do something }); ``` 然后,使用TypeScript编译器将该文件编译为JavaScript文件。可以使用以下命令进行编译: ``` tsc script.ts ``` 这将生成一个名为`script.js`的JavaScript文件。 最后,在HTML文件引用生成的JavaScript文件。例如,在`index.html`文件: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./script.js"></script> </head> <body> <!-- HTML内容 --> </body> </html> ``` 在`<script>`标签引用生成的JavaScript文件`script.js`。 这样,在HTML就可以使用TypeScript编写的代码了。 #### 引用[.reference_title] - *1* *2* [TypeScript(02)——函数,class类其他语法ts在html页面如何使用案例](https://blog.csdn.net/weixin_43216105/article/details/105391739)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [typescriptTS)基础语法快速入门ts编译选项,ts打包使用](https://blog.csdn.net/m0_52409770/article/details/122973043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值