一、什么是联合类型？

联合类型使用竖线 | 作为分隔符，表示一个值可以是列出的类型中的任意一种。

// ID 只接收数字或字符串作为参数
function printId(id: number | string) {
      console.log("Your ID is: " + id);
}

printId(101);       // OK
printId("202");     // OK
printId({ id: 303 }); // 类型“{ id: number; }”的参数不能赋给类型“string | number”的参数。

二、使用类型守卫收窄类型(断言类型)

1. typeof 类型守卫

typeof 是最常见的类型守卫，一般处理 string, number, boolean, symbol, bigint, undefined, function 这些基础类型时使用。

function printId(id: number | string) {
    if (typeof id === 'string') {
        // 在这个代码块内，TypeScript 知道 id 的类型是 string
        console.log(id.toUpperCase());
    } else {
        // 在这个代码块内，TypeScript 知 id 的类型是 number
        console.log(id);
    }
}

printId('good');
printId(10);

2. instanceof 类型守卫

当处理类的实例时，使用instanceof 判断类型

class User {
  constructor(public name: string) {
    this.name =  name;
   }
}

class Product {
  constructor(public title: string) { 
    this.title = title;
  }
}

function printEntity(entity: User | Product) {
  if (entity instanceof User) {
    // entity 被收窄为 User 类型
    console.log("User: " + entity.name);
  } else {
    // entity 被收窄为 Product 类型
    console.log("Product: " + entity.title);
  }
}

let user = new User('john')
printEntity(user)
let product = new Product('title')
printEntity(product)

3. in 操作符守卫

在判断对象的属性时，常常使用in。

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    // animal 被收窄为 Fish 类型
    return animal.swim();
  }
  // animal 被收窄为 Bird 类型
  return animal.fly();
}

let fish = {
  swim:()=>{
    console.log('fish is swim');
  }
}

let bird = {
  fly:()=>{
    console.log('bird fly');
  }
}

move(fish);
move(bird);

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多TypeScript开发干货

Task

Write a program that draws a triangle in the center of the screen. The triangle should have an apex at (0.5, 0.75) in normalized device coordinates, and an apex angle of 120 degrees. The height of the triangle should be 0.5 times the height of the screen.

编写一个程序，在屏幕正中央绘制一个三角形。该三角形的顶点位于归一化设备坐标（NDC）的 (0.5, 0.75)，顶角为 120 度，且三角形的高度为屏幕高度的 0.5 倍。

Theory

函数介绍

dot 函数用于计算两个向量的点积（数量积），返回一个标量值。

主要用途

1. 计算夹角余弦值

vec2 a = normalize(vector1);
vec2 b = normalize(vector2);
float angle = dot(a, b);  // cos(夹角)

2. 计算投影长度

//投影长度 = dot(a, b) / length(b)
vec2 direction = normalize(dir);
vec2 toPoint = point - origin;
float projectionLength = dot(direction, toPoint);

3. 判断向量方向关系

• dot(A, B) = 1：方向完全相同。
• dot(A, B) = 0：方向互相垂直。
• dot(A, B) = -1：方向完全相反。

Answer

uniform vec2 iResolution;

#define PI 3.14

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;

  vec2 ratio = vec2(iResolution.x / iResolution.y, 1.0);
  uv -= 0.5;
  uv *= ratio;
 
  // 顶上的点（0.5, 0.75）
  vec2 p1 = vec2(0, 0.25);
  // 底部点
  vec2 p2 = vec2(0, -0.25);
  // 已知线的方向
  vec2 p1Dir = normalize(p2 - p1);
  // 当前点到顶点的向量
  vec2 dis = uv - p1;
   // 当前点到顶点的方向
  vec2 p2Dir = normalize(dis);
  // 计算夹角
  float t = dot(p1Dir, p2Dir);
  // 剔除大于60° cos(60) == 0.5
  float red = step(0.5, t);
  // 获取当前点在已知线上的投影长度（已知线的长度为0.5）
  float d = dot(p1Dir, dis); 
  red *= (1.0 - step(0.5, d));

  gl_FragColor = vec4(red, 0.0, 0.0, 1.0);
}

效果

练习

Dot

最后

如果你觉得这篇文章有用，记得点赞、关注、收藏，学Shader更轻松！！

Task

Write a shader program that divides the screen into two equal parts. The origin of the left part is at (0.25, 0.5), and the origin of the right part is at (0.75, 0.5). In the left part, display the cosine of the angle between the positive X-axis and the vector directed from the origin to the current pixel position. In the right part, display the sine of the angle between the positive X-axis and the vector directed from the origin to the current pixel position.

编写一个着色器程序，将屏幕分割成两个相等的部分。左侧部分的原点位于 (0.25, 0.5)，右侧部分的原点位于 (0.75, 0.5)。在左侧部分，显示X轴正方向与从原点指向当前像素位置的向量之间夹角的余弦值。在右侧部分，显示X轴正方向与从原点指向当前像素位置的向量之间夹角的正弦值。

Theory

函数介绍

• normalize(): 向量归一化（Vector Normalization）

它接收一个向量，然后返回一个指向相同方向，但长度恰好为 1 的单位向量（Unit Vector）。

常常用于光照计算，方向相关内容

点积介绍

两个单位向量进行点积运算时，其结果等于它们之间夹角的余弦值（cosine）

• dot(A, B) = 1：方向完全相同。
• dot(A, B) = 0：方向互相垂直。
• dot(A, B) = -1：方向完全相反。

Answer

uniform vec2 iResolution;

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;

  //左边，和方向有关时需要向量归一化
  vec2 left = normalize(uv - vec2(0.25, 0.5));
  // 右边
  vec2 right = normalize(uv - vec2(0.75, 0.5));
  
  float condition = step(0.5, uv.x);
  // 因为是单位向量，所有cos = left.x
  float t = (1.0 - condition) * left.x + condition * right.y ;
  
  gl_FragColor = vec4(vec3(t), 1.0);
}

效果

练习

Vector Normaliztion

最后

如果你觉得这篇文章有用，记得点赞、关注、收藏，学Shader更轻松！！