Typescript(一) 环境搭建与十二大基础属性

npm i typescript -g

npm i tsx -g

constgetTime:()=>void=()=>{
console.log(newDate().toLocaleString());
};
getTime();

tsx Basic1.ts

2022/6/15 21:17:46

const test_number_1:number=100;
const test_number_2:number=100.5;
const test_number_3: bigint =100n;

console.log(test_number_1);// 100
console.log(test_number_2);// 100.5
console.log(test_number_3);// 100n

const test_boolean_1:boolean=true;

console.log(test_boolean_1);// true

const test_boolean_2:boolean=false;

console.log(test_boolean_2);// false

const test_string_1:string="hello world";

console.log(test_string_1);// hello world

const test_null_1:null=null;

console.log(test_null_1);// null

const test_undefined_1:undefined=undefined;

console.log(test_undefined_1);// undefined

const test_array_1:number[]=[1,2,3,4,5];

console.log(test_array_1);// [1, 2, 3, 4, 5]

const test_array_2:string[]=["hello","world"];

console.log(test_array_2);// ["hello", "world"]

// 数组和字符串混用
const test_array_3:(number|string)[]=[100,"hello",200,"world"];

console.log(test_array_3);// [100, "hello", 200, "world"]

// 可以赋值对象、数组、函数等
const obj: object ={};
const arr: object =[1,2,3];
const fn:object=()=>{};

const person: object ={ name:"Alice", age:25};

// ❌ 错误：不能访问具体属性
console.log(person.name);// Property 'name' does not exist on type 'object'

// ✅ 只能访问 Object 原型上的方法
console.log(person.toString());

// 1. 对象字面量类型（推荐）
const person:{ name:string; age:number}={ name:"Alice", age:25};

// 2. interface
interface Person {
  name:string;
  age:number;
}
const p: Person ={ name:"Bob", age:30};

// 3. Record
const map: Record<string,number>={ a:1, b:2};

// 4. 索引签名
const dict:{[key:string]:any}={};
dict["name"]="Alice";
dict["age"]=25;
console.log(dict);
// { name: 'Alice', age: 25 }

// object 不接受原始类型
const x: object ="hello";// ❌ 错误

// Object 接受原始类型（自动装箱）
const y: Object ="hello";// ✅ 可以

// 定义：第一个元素是 string，第二个是 number
const user:[string,number]=["Alice",25];

// 访问元素（类型已知）
const name = user[0];// string
const age = user[1];// number

// ❌ 越界访问会报错
const x = user[2];// Tuple type '[string, number]' of length '2' has no element at index '2'

// 第三个元素可选
const coords:[number,number,number?]=[10,20];
// 或
const coords2:[number,number,number?]=[10,20,30];

// 前两个固定，后面任意多个 string
const log:[string,string,...string[]]=[
"INFO",
"module",
"detail1",
"detail2",
];

const point:readonly[number,number]=[10,20];

// ❌ 不可修改
point[0]=100;// Cannot assign to '0' because it is a read-only property

const user:[name:string, age:number]=["Alice",25];

// 解构时更有语义
const[name, age]= user;

// useState 返回的就是元组
// [number, Dispatch<<SetStateAction<number>>]
const[count, setCount]=useState(0);

// 函数返回多个值
functiongetUser():[string,number]{
return["Alice",25];
}

// CSV 行解析
const row:[string,string,number,boolean]=["Alice","Engineer",25,true];

// ❌ 长度不匹配
const bad:[string,number]=["Alice"];// 缺少元素
const bad2:[string,number]=["Alice",25,1];// 元素过多

// ⚠️ push 不会检查类型安全（设计限制）
const t:[string,number]=["Alice",25];
t.push("extra");// 不报错，但破坏元组约束

let value:any=4;
value ="hello";// ✅ 不报错
value =true;// ✅ 不报错
value ={};// ✅ 不报错

// 可以访问任意属性、调用任意方法
value.foo.bar();// ✅ 编译不报错（运行可能报错）

// 逐步迁移时，先标记为 any，后续再细化类型
functionlegacyFunction(data:any):any{
return data;
}

// 库没有 @types 声明文件
const untypedLib:any=require("some-untyped-lib");

// JSON 解析结果
const parsed:any=JSON.parse(jsonString);

// 用户输入
const userInput:any=getDynamicData();

// 测试时临时绕过
const temp:any= complicatedObject;

let x:any="hello";

// 以下全部编译通过，但运行时可能崩溃
x.toFixed(2);// ❌ 运行时错误：字符串没有 toFixed
x[999].name;// ❌ 运行时错误
x();// ❌ 运行时错误：不是函数
newx();// ❌ 运行时错误

let a:any=4;
a.toFixed();// ✅ 编译通过（危险）

let u:unknown=4;
u.toFixed();// ❌ 错误：需要先类型收窄

// unknown 必须检查后才能使用
if(typeof u ==="number"){
  u.toFixed();// ✅ 安全
}

// ❌ 滥用 any
functionbad(data:any):any{
return data.map((x)=> x.id);
}

// ✅ 尽量用具体类型或泛型
functiongood<T>(data:T[]):T[]{
return data;
}

// ✅ 不得不用时，优先 unknown
functionbetter(data:unknown):void{
if(Array.isArray(data)){
// 安全使用
}
}

// ✅ 类型断言（明确知道类型时）
functionok(data:unknown){
const str = data asstring;
return str.length;
}

let a:unknown="hello";
a =123;
a =true;

// 直接使用会报错
a.toString();// ❌ 错误：'a' is of type 'unknown'

let a:unknown="hello";

// 方式1：typeof 检查
if(typeof a ==="string"){
  a.toUpperCase();// ✅ 安全，TS 自动收窄为 string
}

// 方式2：instanceof 检查
if(a instanceofDate){
  a.getTime();// ✅ 安全
}

// 方式3：类型断言
(a asstring).toUpperCase();// ✅ 但断言不安全，需确保正确

// 方式4：类型守卫函数
functionisString(x:unknown): x isstring{
returntypeof x ==="string";
}
if(isString(a)){
  a.toUpperCase();// ✅ 安全
}

let x:any=1;
let y:string= x;// ✅ 不报错，但运行时可能出错

let a:unknown=1;
let b:string= a;// ❌ 报错
let c:string= a asstring;// ✅ 强制断言

functionparseJSON(json:string):unknown{
returnJSON.parse(json);// 返回 unknown 而不是 any
}

const data =parseJSON('{"name": "张三"}');
// data.name  // ❌ 报错，必须先检查

if(typeof data ==="object"&& data !==null&&"name"in data){
console.log(data.name);// ✅ 安全
}

functionprocessInput(input:unknown){
if(typeof input ==="string"){
return input.trim();
}
if(Array.isArray(input)){
return input.length;
}
return input;
}

try{
// ...
}catch(error:unknown){
// TS 4.0+ 推荐 unknown
if(error instanceofError){
console.log(error.message);// ✅ 安全
}
}

// 抛出异常，不会正常返回
functionthrowError(msg:string):never{
thrownewError(msg);
}

// 死循环，不会结束
functioninfiniteLoop():never{
while(true){}
}

typeShape=
|{ kind:"circle"; radius:number}
|{ kind:"square"; side:number}
|{ kind:"triangle"; base:number; height:number};

functiongetArea(shape: Shape):number{
switch(shape.kind){
case"circle":
return Math.PI* shape.radius **2;
case"square":
return shape.side **2;
case"triangle":
return(shape.base * shape.height)/2;
default:
// 如果上面漏了某个 case，这里 shape 就是 never
const _exhaustive:never= shape;
return _exhaustive;
}
}

typeA=string|number|never;
// 等价于：type A = string | number
// never 在联合类型中自动被忽略

functionlogMessage(msg:string):void{
console.log(msg);
// 没有 return 语句
}

functiondoSomething():void{
const a =1+2;
// 计算完，不返回结果
}

functionmaybeLog(msg:string):void{
if(!msg)return;// return undefined
console.log(msg);
}

functionf1():void{}
functionf2():undefined{
returnundefined;
}

let a:void=undefined;// ✅
let b:void=null;// ❌ strictNullChecks 下报错

let c:undefined=f1();// ❌ void 不能赋给 undefined
let d:void=f2();// ✅ undefined 可以赋给 void

// 不关心回调的返回值
functionfetchData(callback:(data:string)=>void):void{
const data ="result";
callback(data);// 返回值被忽略
}

fetchData((data)=>{
console.log(data);
return123;// ✅ 允许，但返回值被忽略
});

interfaceLogger{
log(msg:string):void;
error(msg:string):void;
}

classConsoleLoggerimplementsLogger{
log(msg:string):void{
console.log(msg);
}
error(msg:string):void{
console.error(msg);
}
}

const arr =[1,2,3];

// 明确无返回值
arr.forEach((item):void=>{
console.log(item);
});

// 与有返回值的对比
const doubled = arr.map((item):number=>{
return item *2;
});